<template>
	<view class="">
		<u-form :model="form" ref="uForm">

			<view style="background: #FFFFFF;padding: 80rpx 40rpx;border-radius: 40rpx 40rpx 0 0">

				<!-- <view
						style="border: 2rpx solid #E0E0E0;padding: 10rpx 20rpx;border-radius: 50rpx;margin-bottom: 40rpx;">
						<u-form-item :border-bottom='false' left-icon='account' label=" "
							:left-icon-style="{color:'#0064C6',fontSize:'32rpx'}">
							<u-input v-model="form.name" placeholder="请输入姓名" />
						</u-form-item>
					</view> -->

				<view
					style="border: 2rpx solid #E0E0E0;padding: 10rpx 20rpx;border-radius: 50rpx;margin-bottom: 40rpx;">
					<u-form-item :border-bottom='false' label-width="150" label="手机号"
						:label-style="{fontSize:'24rpx',color:'#0064C6'}"
						:left-icon-style="{color:'#0064C6',fontSize:'32rpx'}">
						<u-input v-model="form.mobile" placeholder="请输入会员手机号" type="Number" maxlength="11" />
					</u-form-item>
				</view>


				<view @click="selectCoupond"
					style="border: 2rpx solid #E0E0E0;padding: 10rpx 20rpx;border-radius: 50rpx;margin-bottom: 40rpx;">
					<u-form-item  v-if="type==1" :border-bottom='false' label-width="150" label="优惠券"
						:label-style="{fontSize:'24rpx',color:'#0064C6'}"
						:left-icon-style="{color:'#0064C6',fontSize:'32rpx'}">
						<u-input disabled v-model="form.coupon_name" placeholder="请选择优惠券" @click="selectCoupond"
							type="select" />
					</u-form-item>
					
					<u-form-item v-if="type==2" :border-bottom='false' label-width="150" label="会员卡"
						:label-style="{fontSize:'24rpx',color:'#0064C6'}"
						:left-icon-style="{color:'#0064C6',fontSize:'32rpx'}">
						<u-input disabled v-model="form.card_name" placeholder="请选择会员卡" @click="selectCard"
							type="select" />
					</u-form-item>
				</view>


				<view
					style="border: 2rpx solid #E0E0E0;padding: 10rpx 20rpx;border-radius: 50rpx;margin-bottom: 40rpx;">
					<u-form-item :border-bottom='false' label-width="150" label="赠送数量"
						:label-style="{fontSize:'24rpx',color:'#0064C6'}"
						:left-icon-style="{color:'#0064C6',fontSize:'32rpx'}">
						<u-input v-model="form.num" placeholder="请输入赠送数量" type="Number" />
					</u-form-item>
				</view>

				<view v-if="type==1" style="border: 2rpx solid #E0E0E0;padding: 10rpx 20rpx;margin-bottom: 40rpx">
					<u-form-item :border-bottom='false' label-width="150" label="备注"
						:label-style="{fontSize:'24rpx',color:'#0064C6'}"
						:left-icon-style="{color:'#0064C6',fontSize:'32rpx'}">
						<u-input type="textarea" v-model="form.remark"
							placeholder=" 此备注内容会以系统消息的方式发送给客户。 例：因XXX补偿优惠券一张" />
					</u-form-item>
				</view>



				<u-button @click="submit" type="primary"
					:custom-style="{width:'600rpx',marginTop:'40rpx',background:'#0064C6'}" shape="circle">发送
				</u-button>

			</view>


		</u-form>
		
		
        <u-select @confirm="Cardconfirm" value-name='id' label-name='cardName' mode="single-column" :list='cardList'
			v-model='cardShow'></u-select>

		<u-select @confirm="confirm" value-name='id' label-name='couponName' mode="single-column" :list='Coupond'
			v-model='CoupondShow'></u-select>

        <wr-state ref='mask' icon='checkmark-circle-fill' iconcolor='#52C41A' tags=' ' content="发放成功" @ready='ready'>
		</wr-state>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import url from '@/common/baseUrl.js';

	export default {
	
		watch: {

		},
		data() {
			return {
				cardList:[],
				type:'',
				cardShow: false,
				CoupondShow: false,
				isread: false,
				url: url.url,
				form: {
					remark: '',
					num: "",
					coupon_id: "",
					coupon_name: "",
					card_name:'',
					card_id:'',
				},
				Coupond: []

			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},

		onLoad(options) {
			if(options.type){
				uni.setNavigationBarTitle({
					title:options.type==1?'手动发劵':'手动发卡'
				})
				this.type=options.type
			}
			if (options.id) {
				this.id = options.id
			}

		},
		methods: {
			ready() {
				uni.navigateBack({

				})
			},
			Cardconfirm(e){
			   this.form.card_id = e[0].value;
			   this.form.card_name = e[0].label;
			},
			confirm(e) {
				this.form.coupon_id = e[0].value;
				this.form.coupon_name = e[0].label;
			},
			getCoupond() {
				this.$u.post('/Alliance/coupon', {
					store_id: this.id,
					page: 1,
					limit: 100
				}).then(res => {
					this.Coupond = res;
					this.CoupondShow = true;
				}).catch(err => {

				})
			},
			selectCoupond() {
				this.getCoupond()

			},
			read(e) {
				uni.navigateTo({
					url: '../help/detail?id=' + e
				})
			},

			submit() {
				
				

				this.$u.post(this.type==1?'/alliance/sendCoupon':'/alliance/sendCard', this.form).then(res => {
					
					this.$refs.mask.show = true
				}).catch(err => {

				})



			},
			ready() {
				uni.navigateBack({

				})
			},
			selectCard(){
				this.$u.post('/alliance/card',).then(res => {
					this.cardList=res;
					this.cardShow = true;
				}).catch(err => {
				
				})
				
				
			}
		}
	}
</script>

<style>
	.u-form-item {
		padding: 0 !important;
	}



	.choose_area {
		margin-bottom: 10rpx !important;
	}

	.mode1 {
		height: 300rpx;
		display: inline-block;
		width: 750rpx;
	}
</style>
